<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>call,bind,apply</title>
</head>

<body>
	<script>
		//案例一
		/**
		const name = '小王'
		const age = 12

		let obj = {
			name: '小张',
			objAge: this.age,
			myFun: function () {
				console.log(`${this.name}年龄${this.age}`)
			},
		}
		obj.objAge // 17
		obj.myFun() // 小张年龄 undefined
		*/

		//案例二
		const name = '小王'
		const age = 12
		let obj = {
			name: '小张',
			objAge: this.age,
			myFun: function (fm, t) {
				console.log(`${this.name}年龄${this.age} 来自${fm} 去往${t}`)
			},
		}

		let db = {
			name: '德玛',
			age: 100,
		}
		obj.myFun.call(db, '成都', '上海') // 德玛 年龄 99  来自 成都去往上海
		obj.myFun.apply(db, ['成都', '上海']) // 德玛 年龄 99  来自 成都去往上海
		//bind会返回一个函数，所以需要执行一下
		obj.myFun.bind(db, ['成都'], '上海')() // 德玛 年龄 99  来自 成都去往上海
		obj.myFun.bind(db, ['成都', '上海'])() // 德玛 年龄 99  来自 成都, 上海去往 undefined
			/**
微妙的差距！
从上面四个结果不难看出:
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。
apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。
bind 除了返回是函数以外，它 的参数和 call 一样。
当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

call的参数是逗号隔开, apply是接收一个数组(会展开参数), bind参数和call一样(但会返回一个函数), 用数组只是一个参数
*/
	</script>
</body>

</html>